<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <!-- 左侧插槽 -->
        <template #left>
          员工总记录{{ total }}条
        </template>
        <!-- 右侧插槽 -->
        <template #right>
          <el-button type="warning" size="small">excel导出</el-button>
          <el-button type="danger" size="small">excel导入</el-button>
          <el-button type="primary" size="small" @click="addDialogVisible=true">新增员工</el-button>
        </template>
      </PageTools>
      <el-card style="margin-top:30px">
        <el-table :data="tableData" border stripe>
          <el-table-column label="序号" type="index" width="80" :index="indexMethod" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <!-- <el-table-column label="头像" prop="staffPhoto" />暂时注释 -->
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column label="手机号" prop="mobile" sortable="" />

          <!-- 使用插槽格式化 -->
          <!-- <el-table-column label="聘用形式" sortable="">
            <template #default="{row}">
              {{ row.formOfEmployment === 1 ? '正式员工' : '试用期' }}
            </template>
          </el-table-column> -->

          <!-- formatter	用来格式化内容	Function(row, column, cellValue, index) -->
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="fommatter" sortable="" />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{row}">
              {{ row.timeOfEntry | fmDate('YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="delUser(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          style="margin-top: 30px"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 新增员工的对话框 -->
      <AddEmployee :add-dialog-visible.sync="addDialogVisible" @addComplete="getEmployeesList" />
    </div>
  </div>
</template>

<script>
import { reqDelUserById, reqGetEmployeesList } from '@/api/employees'
import employeeMenu from '@/constant/employees'
import AddEmployee from './components/AddEmployee.vue'
export default {
  name: 'Employees',
  components: {
    AddEmployee
  },
  data() {
    return {
      page: 1, // 页码
      size: 5, // 每页条数
      // 吧员工列表数据存到数组中
      tableData: [], // 员工列表
      // 员工总数
      total: 0,
      addDialogVisible: false
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    // 获取所有员工列表
    async getEmployeesList() {
      const { data } = await reqGetEmployeesList(this.page, this.size)
      console.log(data)
      this.tableData = data.rows
      this.total = data.total
    },
    // 每页条数发生变化触发的方法
    handleSizeChange(newSize) {
      this.size = newSize
      this.getEmployeesList()
    },
    // 页码发生变化触发的方法
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getEmployeesList()
    },
    // 自定义索引列
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    fommatter(row, column, cellValue, index) {
      // row是当前行的数据 column列的信息 cellValue 当前单元格的值 index是索引
      // console.log(row, column, cellValue, index)
      // return cellValue === 1 ? '正式' : '非正式'
      const obj = employeeMenu.hireType.find(item => item.id === +cellValue)
      // console.log(obj)
      return obj ? obj.value : '未知'
    },
    // 删除员工
    async delUser(id) {
      console.log(id)
      // 1确认消息提示框
      const str = await this.$confirm('是否删除该员工, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      console.log(str)
      if (str !== 'confirm') return this.$message.info('已取消操作 ')
      // 2携带参数发送请求
      const res = await reqDelUserById(id)
      console.log(res)
      // 3重新渲染列表
      this.getEmployeesList()
    }
  }

}
</script>

<style>

</style>
